<template>
  <demo-content :title="title">
    <p>
      在 canvas
      中，不管要画的是图形、文本还是图像，都阔以通过修改绘图环境中的如下4个属性值来指定阴影效果:
    </p>
    <ul>
      <li>shadowColor: CSS3 格式颜色</li>
      <li>shadowOffsetX: 从图形或文本到阴影的水平像素偏移</li>
      <li>shadowOffsetY: 从图形或者文本到阴影的垂直像素偏移</li>
      <li>
        shadowBlur:
        一个与像素无关的值，该值被用于高斯模糊方程中，以便对阴影进行模糊处理
      </li>
    </ul>
    <p>如果满足以下条件，那么使用 Canvas 的绘图环境就可以绘制出阴影效果了：</p>
    <ol>
      <li>指定的 shadowColor 不是全透明</li>
      <li>在其他阴影属性中，存在一个非0值</li>
    </ol>
    <p>
      如果你为shadowOffsctX与shadowOffsetY属性设置了非0的正数值，那么不论你绘制什么内容，它看起来都像是浮在了canvas之上。这些属性的值越
      大，我们就会觉得它在canvas上面浮动得越高。
    </p>
    <p>Canvas context 也可以对文本或路径进行描边或填充时绘制阴影效果。</p>
    <p>你也可以为这些属性指定负值，实现一个内嵌效果。</p>
    <strong>
      注意：阴影效果可能很耗时。为了绘制阴影，浏览器需要将阴影先渲染到一个辅助位图中，
      最后这个辅助位图中的内容会与屏幕上 canvas
      中的内容进行图像合成。由于使用了这种
      辅助位图，所以绘制阴影可能是一项很耗时的操作。
      <br />
      如果你要绘制的是简单的图形、文本或图像，那么其阴影的绘制可能不会带来性能问题。
      但如果你对 canvas 中的动画对象运用阴影效果的话，其性能肯定比不用阴影效果时
      要差一些。
    </strong>
    <canvas ref="canvasRef"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { rect } from "./utils";

const title = "阴影";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  rect.draw(ctx, {
    x: 10,
    y: 10,
    h: 50,
    w: 50,
    strokeStyle: "brown",
    shadowColor: "gray",
    shadowOffsetX: 10,
    shadowOffsetY: 5,
    shadowBlur: 5,
  });
  rect.draw(ctx, {
    x: 100,
    y: 10,
    h: 50,
    w: 50,
    shadowColor: "#000",
    shadowOffsetX: -3,
    shadowOffsetY: -3,
    shadowBlur: 5,
  });
});
</script>

<style src="./default.css" scoped></style>
